<ion-header>
  <ion-toolbar>
    <ion-title>login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="credentialForm">
    <ion-item>
      <ion-input placeholder="Email address" formControlName="email" autofocus="true" clearInput="true" required></ion-input>
    </ion-item>
    <div *ngIf="(email.dirty || email.touched) && email.errors" class="errors">
      <span *ngIf="email.errors?.required">Email is required</span>
      <span *ngIf="email.errors?.email">Email is invalid</span>
    </div>

    <ion-item>
      <ion-input placeholder="Password" type="password" formControlName="password" clearInput="true" required>
      </ion-input>
    </ion-item>
    <div *ngIf="(password.dirty || password.touched) && password.errors" class="errors">
      <span *ngIf="password.errors?.required">Password is required</span>
      <span *ngIf="password.errors?.minlength">Password needs to be 6 characters</span>
    </div>
  </form>
  <ion-button (click)="signIn()" expand="full" color="secondary">Sing in
  </ion-button>
  <ion-button (click)="signUp()" expand="full">Sing up</ion-button>
</ion-content>